<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mermaid流程图预览器</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }
        .input-area {
            margin-bottom: 20px;
        }
        textarea {
            width: 100%;
            height: 200px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: monospace;
            resize: vertical;
        }
        .button-group {
            margin-bottom: 20px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        .output-area {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 20px;
            background-color: white;
            min-height: 300px;
        }
        .file-input {
            margin-bottom: 10px;
        }
        .tabs {
            display: flex;
            margin-bottom: 10px;
        }
        .tab {
            padding: 10px 15px;
            background-color: #eee;
            cursor: pointer;
            border-radius: 4px 4px 0 0;
            margin-right: 5px;
        }
        .tab.active {
            background-color: #4CAF50;
            color: white;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Mermaid流程图预览器</h1>
        
        <div class="tabs">
            <div class="tab active" data-tab="editor">编辑器</div>
            <div class="tab" data-tab="file">文件加载</div>
        </div>
        
        <div class="tab-content active" id="editor-tab">
            <div class="input-area">
                <h3>输入Mermaid代码</h3>
                <textarea id="mermaid-input">flowchart TD
    A[开始] --> B{判断条件}
    B -->|条件1| C[处理1]
    B -->|条件2| D[处理2]
    C --> E[结束]
    D --> E</textarea>
            </div>
            
            <div class="button-group">
                <button id="render-btn">渲染流程图</button>
                <button id="clear-btn">清空</button>
            </div>
        </div>
        
        <div class="tab-content" id="file-tab">
            <div class="file-input">
                <h3>从Markdown文件加载</h3>
                <input type="file" id="file-selector" accept=".md">
                <button id="load-file-btn">加载文件</button>
            </div>
        </div>
        
        <div class="output-area">
            <h3>预览结果</h3>
            <div class="mermaid" id="mermaid-output"></div>
        </div>
    </div>

    <script>
        // 初始化Mermaid
        mermaid.initialize({ startOnLoad: false, theme: 'default' });
        
        // 获取DOM元素
        const mermaidInput = document.getElementById('mermaid-input');
        const mermaidOutput = document.getElementById('mermaid-output');
        const renderBtn = document.getElementById('render-btn');
        const clearBtn = document.getElementById('clear-btn');
        const fileSelector = document.getElementById('file-selector');
        const loadFileBtn = document.getElementById('load-file-btn');
        const tabs = document.querySelectorAll('.tab');
        const tabContents = document.querySelectorAll('.tab-content');
        
        // 渲染Mermaid图表
        function renderMermaid() {
            const code = mermaidInput.value.trim();
            if (!code) return;
            
            mermaidOutput.innerHTML = code;
            try {
                mermaid.render('mermaid-svg', code).then(result => {
                    mermaidOutput.innerHTML = result.svg;
                });
            } catch (error) {
                mermaidOutput.innerHTML = `<div style="color: red;">渲染错误: ${error.message}</div>`;
            }
        }
        
        // 清空输入和输出
        function clearAll() {
            mermaidInput.value = '';
            mermaidOutput.innerHTML = '';
        }
        
        // 从Markdown文件中提取Mermaid代码块
        function extractMermaidFromMarkdown(content) {
            const mermaidRegex = /```mermaid([\s\S]*?)```/g;
            const matches = [];
            let match;
            
            while ((match = mermaidRegex.exec(content)) !== null) {
                matches.push(match[1].trim());
            }
            
            return matches;
        }
        
        // 加载文件内容
        function loadFile() {
            const file = fileSelector.files[0];
            if (!file) {
                alert('请选择一个Markdown文件');
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                const content = e.target.result;
                const mermaidBlocks = extractMermaidFromMarkdown(content);
                
                if (mermaidBlocks.length === 0) {
                    alert('未在文件中找到Mermaid代码块');
                    return;
                }
                
                // 使用第一个找到的Mermaid代码块
                mermaidInput.value = mermaidBlocks[0];
                renderMermaid();
                
                // 如果找到多个代码块，提示用户
                if (mermaidBlocks.length > 1) {
                    alert(`在文件中找到了${mermaidBlocks.length}个Mermaid代码块，已加载第一个。`);
                }
                
                // 切换到编辑器选项卡
                switchTab('editor');
            };
            reader.readAsText(file);
        }
        
        // 切换选项卡
        function switchTab(tabId) {
            tabs.forEach(tab => {
                if (tab.dataset.tab === tabId) {
                    tab.classList.add('active');
                } else {
                    tab.classList.remove('active');
                }
            });
            
            tabContents.forEach(content => {
                if (content.id === `${tabId}-tab`) {
                    content.classList.add('active');
                } else {
                    content.classList.remove('active');
                }
            });
        }
        
        // 事件监听
        renderBtn.addEventListener('click', renderMermaid);
        clearBtn.addEventListener('click', clearAll);
        loadFileBtn.addEventListener('click', loadFile);
        
        // 选项卡切换事件
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                switchTab(tab.dataset.tab);
            });
        });
        
        // 页面加载时渲染默认图表
        document.addEventListener('DOMContentLoaded', renderMermaid);
    </script>
</body>
</html>